<template>
    <div>
        <el-dialog
                title="修改会员信息"
                :visible.sync="updateShow"
                :show-close="false"
                :before-close="handleClose"
                @open="opOpen">
            <el-form :model="updateMemberForm"
                     label-position="right"
                     :rules="rules"
                     label-width="100px" ref="ruleForm">
                <el-form-item label="会员名称" prop="name">
                    <el-input v-model="updateMemberForm.name"></el-input>
                </el-form-item>
                <el-form-item label="会员手机号" prop="phone">
                    <el-input v-model="updateMemberForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="私教选择">
                    <el-select v-model="updateMemberForm.coach" placeholder="请选择您的私教">
                        <el-option v-for="item in coachNameOptions" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button @click="submit">提交</el-button>
            </span>
            <pay-page ref="pay" :orderMap="orderContent" @saveTheOrder="saveTheUpdate"></pay-page>
        </el-dialog>
    </div>
</template>

<script>
    import {updateMember} from '@/utils/apis/member';
    import {getAllCoach} from "@/utils/apis/employee";
    import PayPage from "@/views/PayPage";

    export default {
        name: "MemberUpdate",
        components: {
            PayPage
        },
        data() {
            return {
                rules: {
                    name: [
                        {required: true, message: '请输入员工名称', trigger: 'blur'},
                        {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {
                            validator: function (rule, value, callback) {
                                if (!/^1[3456789]\d{9}$/.test(value)) {
                                    callback(new Error("请输入正确的手机号"));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur'
                        },

                    ],

                },
                coachNameOptions: [],
                initCoach: '',
                orderContent: {
                    type: 'member',
                    price: 1999,
                    subject: 'vitality私教'
                }
            }
        },
        props: ['updateMemberForm', 'updateShow'],

        methods: {
            //打开对话框的回调
            opOpen() {
                this.initData()
            },
            async initData() {
                this.initCoach = this.updateMemberForm.coach
                await getAllCoach().then(res => {
                    if (res.data.code === 200) {
                        res.data.data.forEach(item => {
                            this.coachNameOptions.push(item.name)
                        })
                    } else {
                        this.$notify.error('数据请求失败')
                    }
                })
            },
            handleClose() {
                this.$refs['ruleForm'].clearValidate()
                this.cancel()
            },
            cancel() {
                this.$notify.info('取消修改')
                this.$emit('cancel')
            },
            submit() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        //当更新时需要教练
                        if (this.initCoach === "暂无" && this.updateMemberForm.coach !== "暂无") {
                            this.$refs.pay.closeModal()
                            this.$refs.pay.toPayment()
                        } else {
                            this.saveTheUpdate()
                        }
                    }
                })
            },
            async saveTheUpdate() {
                const member = {
                    id: this.updateMemberForm.id,
                    name: this.updateMemberForm.name,
                    phone: this.updateMemberForm.phone,
                    coach: this.updateMemberForm.coach,
                    type: this.updateMemberForm.type
                }
                await updateMember(member).then(res => {
                    this.$message.success('修改成功')
                    this.$emit('updateSuccess')
                })
            }
        }
    }
</script>

<style scoped>
</style>